<template>
  <div class="Article">
    <div v-if="loading">Loading...</div>
    <div class="artical" v-else>
      <div class="content">
        <h1>{{ post.title }}</h1>
        <ul>
          <li>• 分类:{{ getPostTab }}</li>
          <li>• {{ post.visit_count }}次访问</li>
          <li>• 发布于:{{ post.create_at | formatDate }}</li>
          <li>
            <router-link
              :to="{
                name: 'user_info',
                params: { name: post.author.loginname },
              }"
              >• 作者:{{ post.author.loginname }}</router-link
            >
          </li>
        </ul>
        <div id="content" v-html="post.content"></div>
      </div>
      <div class="reply" v-for="(item, index) in post.replies" :key="index">
        <div class="replyUp">
          <router-link
            :to="{
              name: 'user_info',
              params: { name: item.author.loginname },
            }"
            ><img :src="item.author.avatar_url" alt=""
          /></router-link>
          <router-link
            :to="{
              name: 'user_info',
              params: { name: item.author.loginname },
            }"
            >{{ item.author.loginname }}</router-link
          >
          <span class="stair">{{ index + 1 }}楼</span>
          <div v-if="item.ups.length >= 1" class="loveContain">
            <span class="love" >❤</span>{{ item.ups.length }}
          </div>
        </div>
        
        
        <div>
          <p v-html="item.content"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      post: {
        author: {
          loginname: "yyyvfv", //设置默认值，防止Vue在axios未被调用前报错
        },
      },
    };
  },
  computed: {
    getPostTab() {
      let type = this.post.tab.toString();
      if (type == "ask") {
        return "问答";
      }
      if (type == "share") {
        return "分享";
      }
      if (type == "job") {
        return "招聘";
      }
      if (type == "good") {
        return "精华";
      }
    },
  },
  beforeMount() {
    this.loading = true;
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await this.$http.get(`/topic/${this.$route.params.id}`, {
        mdrender: true,
      });
      console.log(data);
      if (data.success) {
        this.post = data.data;
        this.loading = false;
      }
    },
  },
};
</script>

<style>
@import url("../assets/markdown-github.css");
.artical {
  width: 65%;
  margin-left: 5%;
  margin-top: 15px;
}
.artical .content,
.artical .reply {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 3px;
  padding: 9px;
}
.artical .reply {
  margin-bottom: 2px;
}
.artical .content h1 {
  font-size: 20px;
  margin-bottom: 5px;
}
.artical .content ul {
  list-style: none;
  margin-bottom: 20px;
}
.artical .content ul li {
  display: inline-block;
  color: #a8a3a3;
  font-size: 14px;
  margin-left: 8px;
}
.artical .content ul li a {
  text-decoration: none;
}
.artical .content #detailed {
  padding: 9px;
  line-height: 24px;
  font-size: 18px;
  padding-left: 10px;
}
.artical .content #detailed ul {
  margin-left: 10px;
}
.artical .reply img{
  width: 30px;
  height: 30px;
  border-radius: 2px;
}
.artical .reply .replyUp a{
  text-decoration: none;
  font-size: 25px;

  color: black;
}
.artical .reply .replyUp .stair{
  font-size: 13px;
}
.artical .reply .loveContain{
  float: right;
  color: red;
  font-size: 20px;
}

</style>